<template>
    <canvas :id="canvasId" :width="width" :height="height" @mousedown="canvasClick"
            @mousemove="canvasMove" @mouseup="canvasClickCancel" class="my-range">
    </canvas>
</template>

<script>
    export default {
        name: 'VueComponent',
        props: ['width', 'height', 'pad', 'fill', 'stroke', 'value'],
        data () {
            return {
                msg: 'Welcome to Your Vue.js App',
                canvasId: 'range' + Math.random(),
                changeValue:false
            }
        },
        mounted(){
            this.canvas = document.getElementById(this.canvasId);
            this.ctx = this.canvas.getContext('2d');
            this.init(0);

        },
        methods: {
            init(percent){
                this.ctx.clearRect(0, 0, this.width, this.height);
                this.drawTicket();
                this.drawDrag(this.value||0);
            },
            drawTicket(){
                let nums = ['00', '04', '08', '12', '16', '20', '24'];
                this.ctx.fillStyle = this.fill;
                this.ctx.strokeStyle = this.stroke;

                for (var i = 0; i < 7; i++) {
                    this.ctx.lineWidth = 1;

                    this.ctx.moveTo(this.padding + i * (this.width - 2 * this.padding) / 6, this.padding + 40);
                    this.ctx.lineTo(this.padding + i * (this.width - 2 * this.padding) / 6, this.padding + 50);
                    this.ctx.stroke();

                    this.ctx.fillText(nums[i], 2 + i * (this.width - 2 * this.padding) / 6, this.padding + 65);
                }

                this.ctx.moveTo(this.padding, this.padding + 50);
                this.ctx.lineTo(this.width - this.padding, this.padding + 50);
                this.ctx.stroke();
            },
            drawDrag(percent){

                var posX = this.padding + percent / 24 * (this.width - 2 * this.padding);
                var posY = this.padding + 40;
                this.ctx.beginPath();

                this.ctx.moveTo(posX, posY);
                this.ctx.lineTo(posX + 5, posY - 5);
                this.ctx.lineTo(posX + 5, posY - 25);
                this.ctx.lineTo(posX - 5, posY - 25);
                this.ctx.lineTo(posX - 5, posY - 5);
                this.ctx.lineTo(posX, posY);
                this.ctx.closePath();
                this.ctx.fill();
            },
            canvasClick(e){
                this.changeValue = true;
                if(this.changeValue){
                    document.querySelector('.my-range').style.cursor = 'e-resize'
                }else{
                    document.querySelector('.my-range').style.cursor = 'pointer'
                }
            },
            canvasClickCancel(e){
                this.changeValue = false;
                if(this.changeValue){
                    document.querySelector('.my-range').style.cursor = 'e-resize'
                }else{
                    document.querySelector('.my-range').style.cursor = 'pointer'
                }
            },
            canvasMove(e){
                if(this.changeValue){
                    let percent = (e.layerX - this.padding) / (this.width - 2 * this.padding) * 24;
                    console.log('range-------'+percent);
                    if (percent < 0) percent = 0;
                    if (percent > 24) percent = 24;
                    this.init(percent);
                    this.$emit('valueChange',percent);
                }
            }

        },
        computed: {
            padding: function () {
                return parseInt(this.pad) || 10;
            }
        }

    }
</script>

<style scoped>
    canvas {
        margin: 0;
        padding: 0;
        cursor: pointer;
    }
</style>
